<!DOCTYPE html>
<html>

<head>
    <!-- 样式 -->
    {include file="common/meta" /}
    <!-- js文件 -->
    {include file="common/script" /}
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    .layui-form-label {
        width: 140px;
    }

    .layui-form-item .layui-input-inline {
        width: 300px;
    }
</style>

<body>
    <div class="x-body">
        <form class="layui-form" method="post" enctype="multipart/form-data">
            <input type="hidden" name="id" value="{$config.id}">
            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    配置标题
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="title" name="title" required autocomplete="off" class="layui-input"
                        placeholder="配置标题" value="{$config.title}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="key" class="layui-form-label">
                    配置名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="key" name="key" required autocomplete="off" class="layui-input"
                        placeholder="配置名称" value="{$config.key}">
                </div>

            </div>

            <div class=" layui-form-item">
                <label class="layui-form-label">配置的类型</label>
                <div class="layui-input-inline">
                    <select name="type" lay-verify="required" lay-filter="type">
                        <option value="text" {$config.type=='text' ? 'selected' : '' }>文本</option>
                        <option value="file" {$config.type=='file' ? 'selected' : '' }>文件</option>
                    </select>
                </div>
            </div>

            <!-- 配置的值 文本类型 -->
            <div class="layui-form-item" id="text" {$config.type=='text' ? '' : 'hidden' }>
                <label class="layui-form-label">配置的值(文本类型)</label>
                <div class="layui-input-inline">
                    <input type="text" name="value" placeholder="配置的值" class="layui-input" value="{$config.value}" />
                </div>
            </div>

            <div class="layui-form-item" id="file" {$config.type=='file' ? '' : 'hidden' }>
                <label class="layui-form-label">
                    配置的值(文件类型)
                </label>
                <div class="layui-input-block layui-col-lg4">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="type">
                            上传文件
                        </button>
                        <div class="layui-upload-list">
                            <!-- 预览图片 -->
                            <img class="layui-upload-img" id="preview" src="{$config.value}" />
                        </div>
                    </div>
                </div>
            </div>

            <!-- 提交 -->
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button class="layui-btn" lay-filter="add" lay-submit="">
                    修改
                </button>
                <button type="reset" class="layui-btn layui-btn-danger">重置</button>
            </div>
        </form>
    </div>
    <script>
        layui.use(['form', 'layer', 'jquery', 'upload'], function () {
            $ = layui.jquery;
            var form = layui.form,
                upload = layui.upload,
                layer = layui.layer;

            //监听提交
            form.on('select(type)', function (data) {
                // 获取选择的项
                var value = data.value;
                //   console.log(value);
                if (value == 'file') {
                    $('#text').attr('hidden', 'hidden');
                    $('#file').removeAttr('hidden');
                } else {
                    $('#file').attr('hidden', 'hidden');
                    $('#text').removeAttr('hidden');
                }

            });

            //上传图片
            var uploadInst = upload.render({
                // 绑定元素
                elem: '#type',
                // 禁用自动上传
                auto: false,
                // 设置字段名
                field: 'file',
                choose: function (obj) { //选择文件后的回调函数
                    //预读本地文件示例，不支持ie8 
                    obj.preview(function (index, file, result) {
                        //给图片设置src显示属性
                        $('#preview').attr('src', result); //图片链接（base64）
                    })
                }
            })
        });
    </script>
</body>

</html>